<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Nudity Detection with HTMLCanvas and Javascript</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="wrapper">
			<h1>Non Nude Images</h1>
			<div class="entry">
			  <img id="nonNude1" src="images/2.jpg" width="500" height="375" alt="" />
				<div class="btn" onclick="nude.load('nonNude1');nude.scan(function(result){ if(!result){ document.getElementById('nonResult1').innerHTML='No nude!'; }else{ document.getElementById('nonResult1').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult1"></div>
			</div>
			<div class="entry">
				<img id="nonNude2" src="images/3.jpg" width="500" height="375" alt="" />
				<div class="btn" onclick="nude.load('nonNude2');nude.scan(function(result){ if(!result){ document.getElementById('nonResult2').innerHTML='No nude!!'; }else{ document.getElementById('nonResult2').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult2"></div>
			</div>
			<div class="entry">
				<img id="nonNude3" src="images/123.png" width="943" height="534" alt="" />
				<div class="btn" onclick="nude.load('nonNude3');nude.scan(function(result){ if(!result){ document.getElementById('nonResult3').innerHTML='No nude!!'; }else{ document.getElementById('nonResult3').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult3"></div>
			</div>
			<div class="entry">
				<img id="nonNude4" src="images/a.jpg" width="1050" height="1050" alt="" />
				<div class="btn" onclick="nude.load('nonNude4');nude.scan(function(result){ if(!result){ document.getElementById('nonResult4').innerHTML='No nude!!'; }else{ document.getElementById('nonResult4').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult4"></div>
			</div>
			<div class="entry">
				<img id="nonNude5" src="images/f.jpg" width="500" height="502" alt="" />
				<div class="btn" onclick="nude.load('nonNude5');nude.scan(function(result){ if(!result){ document.getElementById('nonResult5').innerHTML='No nude!!'; }else{ document.getElementById('nonResult5').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult5"></div>
			</div>
			<div class="entry">
				<img id="nonNude6" src="images/g.jpg" width="504" height="315" alt="" />
				<div class="btn" onclick="nude.load('nonNude6');nude.scan(function(result){ if(!result){ document.getElementById('nonResult6').innerHTML='No nude!!'; }else{ document.getElementById('nonResult6').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="nonResult6"></div>
			</div>
			<h1>Nude Images</h1>
			<div class="entry">
			  <img id="nude1" src="images/blonde_laying_down.jpg" width="768" height="480" alt="" />
				<div class="btn" onclick="nude.load('nude1');nude.scan(function(result){ if(!result){ document.getElementById('result1').innerHTML='No nude!'; }else{ document.getElementById('result1').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result1"></div>
			</div>
			<div class="entry">
			  <img id="nude2" src="images/c.jpg" width="1024" height="640" alt="" />
				<div class="btn" onclick="nude.load('nude2');nude.scan(function(result){ if(!result){ document.getElementById('result2').innerHTML='No nude!'; }else{ document.getElementById('result2').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result2"></div>
			</div>
			<div class="entry">
			  <img id="nude3" src="images/d.jpg" width="400" height="637" alt="" />
				<div class="btn" onclick="nude.load('nude3');nude.scan(function(result){ if(!result){ document.getElementById('result3').innerHTML='No nude!'; }else{ document.getElementById('result3').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result3"></div>
			</div>
			<div class="entry">
			  <img id="nude4" src="images/girl_flash.jpg" width="317" height="269" alt="" />
				<div class="btn" onclick="nude.load('nude4');nude.scan(function(result){ if(!result){ document.getElementById('result4').innerHTML='No nude!'; }else{ document.getElementById('result4').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result4"></div>
			</div>
			<div class="entry">
			  <img id="nude5" src="images/girl_in_blue.jpg" width="518" height="777" alt="" />
				<div class="btn" onclick="nude.load('nude5');nude.scan(function(result){ if(!result){ document.getElementById('result5').innerHTML='No nude!'; }else{ document.getElementById('result5').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result5"></div>
			</div>
			<div class="entry">
			  <img id="nude6" src="images/nakedgirls.jpg" width="740" height="555" alt="" />
				<div class="btn" onclick="nude.load('nude6');nude.scan(function(result){ if(!result){ document.getElementById('result6').innerHTML='No nude!'; }else{ document.getElementById('result6').innerHTML='Nude!!'; } });">Scan Image</div>
				<div style="float:right;margin-top:-20px;" id="result6"></div>
			</div>
		</div>
		<!-- please download excanvas if you use ie -->
		<!--[if IE]>
		<script type="text/javascript" src="excanvas.js"></script>	
		<![endif]-->
		<script type="text/javascript" src="nude.min.js"></script>
		<script type="text/javascript" src="test.nude.js"></script>

	</body>
</html>
